<template>
    <el-dialog v-model="DialogVisible" :show-close="false" class="privacsydialog" width="500px" center>
        <div class="close" @click="close">
            <span>
                <el-icon color="#b5b6c8" size="16">
                    <CloseBold />
                </el-icon>
            </span>
        </div>
        <div class="contact">
            <h3>Privacy Policy</h3>
            <span>Last Updated: February 16, 2021</span>
            <p>PLEASE NOTE THAT YOUR USE OF AND ACCESS TO OUR SERVICES ARE SUBJECT TO THE FOLLOWING TERMS; IF YOU DO NOT
                AGREE TO ALL OF THE FOLLOWING, YOU MAY NOT USE OR ACCESS THE SERVICES IN ANY MANNER. YOU HAVE THE RIGHT
                TO WITHDRAW ANY CONSENT PROVIDED PURSUANT TO THIS PRIVACY POLICY AT ANY TIME, BY EMAILING US AT
                Service@Worldgaming.info.PLEASE NOTE THAT YOUR USE OF AND ACCESS TO OUR SERVICES ARE SUBJECT TO THE
                FOLLOWING TERMS; IF YOU DO NOT AGREE TO ALL OF THE FOLLOWING, YOU MAY NOT USE OR ACCESS THE SERVICES IN
                ANY MANNER. YOU HAVE THE RIGHT TO WITHDRAW ANY CONSENT PROVIDED PURSUANT TO THIS PRIVACY POLICY AT ANY
                TIME, BY EMAILING US AT Service@Worldgaming.info.PLEASE NOTE THAT YOUR USE OF AND ACCESS TO OUR SERVICES
                ARE SUBJECT TO THE FOLLOWING TERMS; IF YOU DO NOT AGREE TO ALL OF THE FOLLOWING, YOU MAY NOT USE OR
                ACCESS THE SERVICES IN ANY MANNER. YOU HAVE THE RIGHT TO WITHDRAW ANY CONSENT PROVIDED PURSUANT TO THIS
                PRIVACY POLICY AT ANY TIME, BY EMAILING US AT Service@Worldgaming.info.PLEASE NOTE THAT YOUR USE OF AND
                ACCESS TO OUR SERVICES ARE SUBJECT TO THE FOLLOWING TERMS; IF YOU DO NOT AGREE TO ALL OF THE FOLLOWING,
                YOU MAY NOT USE OR ACCESS THE SERVICES IN ANY MANNER. YOU HAVE THE RIGHT TO WITHDRAW ANY CONSENT
                PROVIDED PURSUANT TO THIS PRIVACY POLICY AT ANY TIME, BY EMAILING US AT Service@Worldgaming.info.</p>
        </div>

    </el-dialog>
</template>

<script setup lang="ts">
import {  shallowRef, watch } from "vue";
import { CloseBold } from '@element-plus/icons-vue'
let DialogVisible = shallowRef<boolean>(false)
watch(
    DialogVisible,
    () => {
    },
    {
        immediate: true,
    }
);

let close = () => {
    DialogVisible.value = false;
};

let open = (val: string) => {

    DialogVisible.value = true;
};

defineExpose({
    open,
});
</script>

<style lang="scss">
.privacsydialog {
    padding: 10px 20px 50px 20px !important;
    background-color: rgb(50, 53, 62);
    border-radius: 10px !important;

    .contact {
        height: 450px;
        width: 100%;
        overflow: auto;

        &::-webkit-scrollbar {
            display: none;
        }

        h3 {
            height: 39px;
            line-height: 39px;
            text-align: left;
            font-size: 16px;
            font-family: "Times New Roman", serif;
            margin: 18px 0;
            color: #8c9099;
        }

        span {
            display: block;
            font-size: 14px;
            margin: 10px 0 50px;
            font-family: "Times New Roman", serif;
            color: #8c9099;
        }

        p {
            font-size: 14px;
            font-family: "Times New Roman", serif;
            color: #8c9099;
        }
    }
}

.el-dialog__header {
    padding: 0 0 0 !important;
}

.close {
    width: 100%;
    @include flex(row, flex-end, center);
    border-bottom: 1px solid #4a4c53;
    padding-bottom: 20px;

    span {
        display: block;
        width: 28px;
        height: 28px;
        @include flex(row, center, center);
        border: 2px solid #b5b6c8;
        border-radius: 16px;
        cursor: pointer;
    }
}

.center {
    width: 100%;
    margin-top: 20px;
    @include flex(column, flex-start, center);

    .move {
        width: 100%;
        min-height: 295px;
        position: relative;
    }

    >img {
        width: 150px;
        margin: 0 auto;
    }

    .el-divider__text {
        background-color: rgb(50, 53, 62);
    }

    .el-divider--horizontal {
        border-top: 1px solid #4a4c53;
    }

    .line {
        display: block;
        color: #fff;
        font-size: 12px;
    }

    .user {
        width: 50px;
    }

    >p {
        @include flex(row, center, center);
        padding-top: 40px;
        font-size: 18px;
        color: #03b484;

        .el-icon {
            margin: 3px 0 0 10px;
        }
    }
}
</style>